<template>
  <div class="details container">

    <h1 class="page-header">
      {{customer.name}}

      <span class="pull-right">
      <router-link class="btn btn btn-primary" v-bind:to="'Edit/'+customer.id">
        编辑
      </router-link>
      <button class="btn btn-danger delete" v-on:click="deleteCustomer(customer.id)">删除</button>
      <router-link to="/Contacts/Center" class="btn btn-warning">返回</router-link>
    </span>
  </h1>
  <ul class="list-group">
    <li class="list-group-item">
        性别：{{customer.sex}}
    </li>
    <li class="list-group-item">
        家庭电话：{{customer.homephone}}
    </li>
      <li class="list-group-item">
        邮箱：{{customer.email}}
    </li>
    <li class="list-group-item">
        手机：{{customer.mobilephone}}
    </li>

    <li class="list-group-item">
      家庭地址：{{customer.address}}
    </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ContactsDetial',
  data () {
    return {
      customer: ''
    }
  },
  methods: {
    fetchCustomers (id) {
      this.$http.get('http://localhost:3000/users/' + id)
        .then((response) => {
          // console.log(response);
          this.customer = response.data
        })
    },
    deleteCustomer (id) {
      // console.log(id);
      this.$http.delete('http://localhost:3000/users/' + id)
        .then((response) => {
          this.$router.push({path: '/Contacts/Center', query: {alert: '用户删除成功!'}})
        })
    }
  },
  created () {
    this.fetchCustomers(this.$route.params.id)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1{
    font-size: 30px;
    color: mediumaquamarine;
  }
  li{
    margin-top: 30px;
    font-size: 18px;
    border: #444444 1px solid;
  }
</style>
